<template>
  <div class="home_map_layers">
    <div class="wrapper-title">
      <BaseTitle title="Layers API" />
    </div>

    <div class="wrapper-content">
      <div>
        <h2>1. createLayerTile</h2>
        <h3>相当于new ol.layer.Tile，用于创建白底地图或卫星图等Arcgis地图，需要传入一个Object</h3>
        <code class="code">
          <div class="comment">
            // 白底地图实例
          </div>
          <div>
            <span class="code-default">const</span>
            source = <span class="code-green">Sources</span>.createSourceArcgis({
          </div>
          <div class="code-indent2">
            url: 'http://202.105.25.138:20462/arcgis/rest/services/data_visualization/basemap_backgroud_normal/MapServer',
            <span class="comment">
              // 白底地图地址
            </span>
          </div>
          <div class="code-indent2">
            ...sourceOptions
            <span class="comment">
              // 其他source配置
            </span>
          </div>
          <div>})</div>
          <div class="code-emptyLine"></div>
          <div>
            <div>
              <span class="code-default">const</span>
              layer = <span class="code-green">Layers</span>.createLayerTile({
            </div>
            <div class="code-indent2">
              source,
            </div>
            <div class="code-indent2">
              ...layerOptions
              <span class="comment">
                // 其他layer配置
              </span>
            </div>
            <div>})</div>
          </div>
        </code>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.tileTbody"></Table>
        </h3>
      </div>
      <div>
        <h2>2. createLayerVector</h2>
        <h3>相当于new ol.layer.Vector，用于创建普通图标图层，需要传入一个Object</h3>
        <code class="code">
          <div>
            <span class="code-default">const</span>
            source = <span class="code-green">Sources</span>.createSourceVector({
          </div>
          <div class="code-indent2">
            features,
            <span class="comment">
              // features是一个数组，数组每一项均为feature，如何创建feature，详情可见features API
            </span>
          </div>
          <div class="code-indent2">
            ...sourceOptions
            <span class="comment">
              // 其他source配置
            </span>
          </div>
          <div>})</div>
          <div class="code-emptyLine"></div>
          <div>
            <div>
              <span class="code-default">const</span>
              layer = <span class="code-green">Layers</span>.createLayerVector({
            </div>
            <div class="code-indent2">
              source,
            </div>
            <div class="code-indent2">
              ...layerOptions
              <span class="comment">
                // 其他layer配置
              </span>
            </div>
            <div>})</div>
          </div>
        </code>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.vectorTbody"></Table>
        </h3>
      </div>
      <div>
        <h2>3. createLayerImage</h2>
        <h3>相当于new ol.layer.Image，用于创建覆盖在地图上的大张静态图片，如：云图、雷达等图层，需要传入一个Object</h3>
        <code class="code">
          <div>
            <span class="code-default">const</span>
            source = <span class="code-green">Sources</span>.createSourceImage({
          </div>
          <div class="code-indent2">
            url,
            <span class="comment">
              // 静态图片路径
            </span>
          </div>
          <div class="code-indent2">
            imageExtent
            <span class="comment">
              // 静态图片位置对角坐标
            </span>
          </div>
          <div>})</div>
          <div class="code-emptyLine"></div>
          <div>
            <div>
              <span class="code-default">const</span>
              layer = <span class="code-green">Layers</span>.createLayerImage({
            </div>
            <div class="code-indent2">
              source,
            </div>
            <div class="code-indent2">
              ...layerOptions
              <span class="comment">
                // 其他layer配置
              </span>
            </div>
            <div>})</div>
          </div>
        </code>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.imageTbody"></Table>
        </h3>
      </div>
      <div>
        <h2>4. createLayerKml</h2>
        <h3>用于创建Kml的图层，如：堤围、险段等图层，需要传入一个Object</h3>
        <code class="code">
          <div>
            <div>
              <span class="code-default">const</span>
              layer = <span class="code-green">Layers</span>.createLayerKml({
            </div>
            <div class="code-indent2">
              url: '/static/kml/banksLayer.kml',
              <span class="comment">
                // 堤围kml文件路径
              </span>
            </div>
            <div class="code-indent2">
              name: 'banksLayer'
              <span class="comment">
                // 堤围图层名字
              </span>
            </div>
            <div>})</div>
          </div>
        </code>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.kmlTbody"></Table>
        </h3>
      </div>
      <div>
        <h2>5. createLayerIcon</h2>
        <h3>用于创建普通图标图层，是对createLayerVector的一层封装，需要传入一个Object</h3>
        <code class="code">
          <div>
            <div>
              <span class="code-default">const</span>
              features = []
            </div>
            <div>
              <span class="code-green">data</span>.map((item) => {
            </div>
            <div class="code-indent2">
              <span class="code-green">features</span>.push(<span class="code-green">Feature</span>.createFeatureIcon({
            </div>
            <div class="code-indent4">
              lng,
              <span class="comment">// 经度</span>
            </div>
            <div class="code-indent4">
              lat,
              <span class="comment">// 纬度</span>
            </div>
            <div class="code-indent4">
              data: item,
              <span class="comment">// 把数据绑定在feature上</span>
            </div>
            <div class="code-indent4">
              img
              <span class="comment">// icon图片路径</span>
            </div>
            <div class="code-indent2">}))</div>
            <div>})</div>
          </div>
          <div class="code-emptyLine"></div>
          <div>
            <div>
              <span class="code-default">const</span>
              layer = <span class="code-green">Layers</span>.createLayerIcon({
            </div>
            <div class="code-indent2">
              features,
              <span class="comment">
                // 数据遍历出来的features
              </span>
            </div>
            <div class="code-indent2">
              layerName: 'gateLayer'
              <span class="comment">
                // 水闸图层名字
              </span>
            </div>
            <div>})</div>
          </div>
        </code>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.iconTbody"></Table>
        </h3>
      </div>
      <div>
        <h2>6. createOverLayer</h2>
        <h3>用于创建一层ol.Overlay，即在地图上添加DOM元素，需要传入一个Object</h3>
        <code class="code">
          <div>
            <div>
              <span class="code-default">const</span>
              div = document.createElement('div')
            </div>
            <div>
              <span class="code-green">div</span>.innerHTML = '我是一个overlay'
            </div>
          </div>
          <div class="code-emptyLine"></div>
          <div>
            <div>
              <span class="code-default">const</span>
              overlay = <span class="code-green">Layers</span>.createOverLayer({
            </div>
            <div class="code-indent2">
              element: div,
            </div>
            <div class="code-indent2">
              position: [120.33, 23.66]
            </div>
            <div>})</div>
          </div>
        </code>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.overlayTbody"></Table>
        </h3>
      </div>
    </div>
  </div>
</template>

<script>
import * as apis from './api/layers'
import { apiThead } from './api/common'

export default {
  created () {
    this.apis = apis
    this.apiThead = apiThead(this)
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
  .home_map_layers {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
  }
</style>
